<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
            border: none;
        }
        #slider{
            width: 750px;
            height: 320px;
            border: 1px #cccccc solid;
            padding: 10px;
            margin: 100px auto;
            position: relative;
        }
        #top{
            width: 100%;
            height: 100%;
            position: relative;
            overflow: hidden;
        }
        #top ul{
            width: 4500px;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
        }
        #top ul li{
            float: left;
        }
        #ol{
            position: absolute;
            right: 10px;
            bottom: 10px;
        }
        #ol li{
            display: inline-block;
            width: 20px;
            height: 20px;
            background: #5e6268;
            border-radius: 50%;
            margin-right: 5px;
        }
        #ol li.current{
            background: orangered;
        }
    </style>
    
</head>
<body>
<div id="slider">
    <div id="top">
        <ul id="ul">
            <li><img src="imgs/pic01.jpg" alt=""></li>
            <li><img src="imgs/pic02.jpg" alt=""></li>
            <li><img src="imgs/pic03.jpg" alt=""></li>
            <li><img src="imgs/pic04.jpg" alt=""></li>
            <li><img src="imgs/pic05.jpg" alt=""></li>
        </ul>
    </div>
    <ol id="ol">
        <!--<li class="current"></li>-->
        <!--<li></li>-->
        <!--<li></li>-->
        <!--<li></li>-->
        <!--<li></li>-->
    </ol>
</div>
<script src="js/myFunc.js"></script>
<script>
    window.onload=function () {
        var currentIndex = 0, indicatorIndex = 0;
        var lis = document.getElementById("ul").children;
        var ul = document.getElementById("ul");
        document.getElementById("ul").appendChild(lis[0].cloneNode(true));

        for(var i = 0;i<lis.length-1;i++){
            var li = document.createElement("li");
            document.getElementById("ol").appendChild(li);
        }
        document.getElementById("ol").children[0].className="current";

        var olLis = document.getElementById("ol").children;
        for(var j = 0;j<olLis.length;j++){
            (function (j) {
            var li = olLis[j];
            li.onmouseover = function () {
                for(var i = 0 ;i<olLis.length;i++){
                    olLis[i].className="";
                }
                olLis[j].className="current";

                constant(ul,-(750 * j),100);
            };
        })(j);
        }
       var timer = setInterval(autoPlay, 1000);
        document.getElementById("slider").onmouseover=function () {
            clearInterval(timer);
        }
        document.getElementById("slider").onmouseout = function () {
            timer = setInterval(autoPlay, 1000);
        }
        function autoPlay() {
            currentIndex++;
            if(currentIndex>lis.length-1){
                ul.style.left = 0;
                currentIndex = 1;
            }
            constant(ul,-(750 * currentIndex),100);


            indicatorIndex++;
            if(currentIndex>olLis.length-1){
                /!*ul.style.left = 0;*!/
                indicatorIndex = 0;
            }
            for(var i = 0;i<olLis.length;i++){
                olLis[i].className="";
            }
            olLis[indicatorIndex].className="current";
        }
    }
</script>
</body>
</html>